import React from 'react'
import {ItemContainer} from './CommodityItem.style'
import Lazyload from 'react-lazyload'
import { useHistory } from 'react-router-dom'

function CommodityItem(props) {
    const {CommodityData}=props
    const history=useHistory()
    
    return (
        <ItemContainer style={{"width":'170px'}} onClick={()=>history.push(`/detail/${CommodityData.id}`)}>
            <Lazyload><img src={CommodityData.imgSrc} alt="" /></Lazyload>
            <div>{CommodityData.title}</div>
            <div className='lable'>{CommodityData.lable}</div>
            <div className='price'>
                <span>{CommodityData.isdiscount?"到手价￥":"￥"}</span>
                {CommodityData.price}
                <del>{CommodityData.isdiscount && "￥"+CommodityData.notdiscountPrice}</del>
            </div>
            <div className='discount'><span>{CommodityData.discountname}</span>{CommodityData.discountstate}</div>
        </ItemContainer>
    )
}

export default CommodityItem
